The code below adds buttons to the top left of the map, for controlling tilt, rotation, and zoom.
````css
.control {
position: absolute;
left: 10px; /* This might need to be tweaked */
z-index: 1000;
}
.control.tilt {
top: 100px; /* This might need to be tweaked */
}
.control.rotation {
top: 145px; /* This might need to be tweaked */
}
.control.zoom {
top: 190px; /* This might need to be tweaked */
}
.control.zoom button{
font-weight: normal;
}
.control button {
width: 30px;
height: 30px;
margin: 15px 0 0 15px;
border: 1px solid #999999;
background: #ffffff;
opacity: 0.6;
border-radius: 5px;
box-shadow: 0 0 5px #666666;
font-weight: bold;
text-align: center;
}
.control button:hover {
opacity: 1;
cursor: pointer;
}
````
````xml
````
````javascript
var controlButtons = document.querySelectorAll('.control button');
for (var i = 0; i < controlButtons.length; i++) {
controlButtons[i].addEventListener('click', function(e) {
var button = this;
var parentClassList = button.parentNode.classList;
var direction = button.classList.contains('inc') ? 1 : -1;
var increment;
var property;
if (parentClassList.contains('tilt')) {
property = 'Tilt';
increment = direction*10;
}
if (parentClassList.contains('rotation')) {
property = 'Rotation';
increment = direction*10;
}
if (parentClassList.contains('zoom')) {
property = 'Zoom';
increment = direction*1;
}
if (property) {
osmb['set'+ property](osmb['get'+ property]()+increment);
}
});
}
````